<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .cvs{
      border: solid 1px black;
    }
  </style>
</head>
<body>
  <canvas class="cvs"></canvas>
</body>
<script>

  const cvs = document.querySelector(".cvs");
  cvs.width = 400;
  cvs.height = 200;

  const ctx = cvs.getContext("2d");

  ctx.moveTo(50, 50);
  ctx.lineTo(100, 100);
  ctx.stroke();

  ctx.beginPath();
  ctx.rect(100, 50, 30, 30);
  ctx.strokeStyle = "green";
  ctx.stroke();

  ctx.strokeRect(150,50,30,30);
  
  ctx.fillRect(200,50,30,30);

  ctx.beginPath();
  ctx.arc(140, 120, 20, 0, 2*Math.PI);
  ctx.fillStyle = "red";
  ctx.fill();

  ctx.beginPath();
  ctx.ellipse(220, 120, 40, 20, 0, 0, 2*Math.PI);
  ctx.fill();

  // ctx.clearRect(0, 0, cvs.width, cvs.height)
  
</script>
</html>